<template>
	<div class="test-container">
		<h2>数据连接器表单测试</h2>

		<a-divider>测试场景</a-divider>

		<a-space direction="vertical" style="width: 100%">
			<!-- 测试新建 -->
			<a-button type="primary" @click="testCreate">测试新建连接器</a-button>

			<!-- 测试编辑MySQL -->
			<a-button @click="testEditMySQL">测试编辑MySQL连接器</a-button>

			<!-- 测试编辑本地API -->
			<a-button @click="testEditLocalAPI">测试编辑本地API连接器</a-button>

			<!-- 测试编辑外部API -->
			<a-button @click="testEditExternalAPI">测试编辑外部API连接器</a-button>

			<!-- 测试嵌套config结构 -->
			<a-button @click="testNestedConfig">测试嵌套config结构</a-button>
		</a-space>

		<a-divider>测试数据</a-divider>

		<a-collapse>
			<a-collapse-panel key="1" header="MySQL测试数据">
				<pre>{{ JSON.stringify(mysqlTestData, null, 2) }}</pre>
			</a-collapse-panel>

			<a-collapse-panel key="2" header="本地API测试数据">
				<pre>{{ JSON.stringify(localAPITestData, null, 2) }}</pre>
			</a-collapse-panel>

			<a-collapse-panel key="3" header="外部API测试数据">
				<pre>{{ JSON.stringify(externalAPITestData, null, 2) }}</pre>
			</a-collapse-panel>

			<a-collapse-panel key="4" header="嵌套config测试数据">
				<pre>{{ JSON.stringify(nestedConfigTestData, null, 2) }}</pre>
			</a-collapse-panel>
		</a-collapse>

		<!-- 数据连接器表单 -->
		<DataConnectorForm ref="dataConnectorFormRef" @success="handleSuccess" />
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	import { message } from 'ant-design-vue'
	import DataConnectorForm from '../DataConnectorForm.vue'

	const dataConnectorFormRef = ref()

	// MySQL测试数据
	const mysqlTestData = ref({
		id: 'test-mysql-001',
		name: '测试MySQL连接器',
		type: 'MYSQL',
		description: '用于测试的MySQL连接器',
		config: {
			host: 'localhost',
			port: '3306',
			database: 'test_db',
			username: 'root',
			password: 'password',
			params: 'useSSL=false&serverTimezone=Asia/Shanghai',
			url: 'jdbc:mysql://localhost:3306/test_db?useSSL=false&serverTimezone=Asia/Shanghai'
		}
	})

	// 本地API测试数据
	const localAPITestData = ref({
		id: 'test-local-api-001',
		name: '测试本地API连接器',
		type: 'LOCAL_API',
		description: '用于测试的本地API连接器',
		config: {
			scanModules: '["dashboard", "sys"]',
			onlyGetMethods: 'true',
			enablePermissionCheck: 'true',
			excludeSystemApis: 'true',
			excludePaths: '[]',
			cacheTimeout: '300',
			enableCache: 'true'
		}
	})

	// 外部API测试数据
	const externalAPITestData = ref({
		id: 'test-external-api-001',
		name: '测试外部API连接器',
		type: 'EXTERNAL_API',
		description: '用于测试的外部API连接器',
		config: {
			baseUrl: 'https://jsonplaceholder.typicode.com',
			authType: 'BEARER_TOKEN',
			timeout: '30000',
			retryCount: '3',
			auth_token: 'test-token-123',
			auth_prefix: 'Bearer ',
			apis: JSON.stringify([
				{
					path: '/posts',
					method: 'GET',
					description: '获取文章列表'
				},
				{
					path: '/users',
					method: 'GET',
					description: '获取用户列表'
				}
			])
		}
	})

	// 嵌套config测试数据（模拟后端返回的数据结构）
	const nestedConfigTestData = ref({
		id: 'test-nested-config-001',
		name: '测试嵌套config结构',
		type: 'LOCAL_API',
		description: '用于测试嵌套config结构的连接器',
		config: {
			config: JSON.stringify({
				scanModules: '["dashboard", "sys"]',
				onlyGetMethods: 'true',
				enablePermissionCheck: 'true',
				excludeSystemApis: 'true',
				excludePaths: '[]',
				cacheTimeout: '300',
				enableCache: 'true'
			})
		}
	})

	// 测试方法
	const testCreate = () => {
		dataConnectorFormRef.value.open()
		message.info('打开新建连接器表单')
	}

	const testEditMySQL = () => {
		dataConnectorFormRef.value.open(mysqlTestData.value)
		message.info('打开编辑MySQL连接器表单')
	}

	const testEditLocalAPI = () => {
		dataConnectorFormRef.value.open(localAPITestData.value)
		message.info('打开编辑本地API连接器表单')
	}

	const testEditExternalAPI = () => {
		dataConnectorFormRef.value.open(externalAPITestData.value)
		message.info('打开编辑外部API连接器表单')
	}

	const testNestedConfig = () => {
		dataConnectorFormRef.value.open(nestedConfigTestData.value)
		message.info('打开嵌套config结构测试表单')
	}

	const handleSuccess = () => {
		message.success('表单提交成功！')
	}
</script>

<style scoped>
	.test-container {
		padding: 20px;
		max-width: 1200px;
		margin: 0 auto;
	}

	pre {
		background-color: #f5f5f5;
		padding: 10px;
		border-radius: 4px;
		overflow-x: auto;
	}
</style>
